<template>
  <div class="patientServe">
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/内科.png" alt="" />
      </div>

      <div>内科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/外科.png" alt="" />
      </div>

      <div>外科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/妇产科.png" alt="" />
      </div>

      <div>妇产科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/儿科.png" alt="" />
      </div>

      <div>儿科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/眼科.png" alt="" />
      </div>

      <div>眼科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/耳鼻喉科.png" alt="" />
      </div>

      <div>耳鼻喉科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/口腔科.png" alt="" />
      </div>

      <div>口腔科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/肿瘤科.png" alt="" />
      </div>

      <div>肿瘤科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/康复科.png" alt="" />
      </div>

      <div>康复科</div>
    </div>
    <div class="patientServe_box">
      <div class="patientServe_box_img">
        <img src="@/assets/img/homePatient/其他.png" alt="" />
      </div>

      <div>其他</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "patientServe",
  data() {
    return {};
  },
};
</script>

<style lang="scss" scope>
.patientServe {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  font-size: 14px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px 0;
  &_box {
    flex: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0;
    &_img {
      width: 35px;
      height: 35px;
    }
    & img {
      width: 35px;
      height: 35px;
      object-fit: cover;
    }
  }
}
</style>
